<template>
	<view>
		<!-- 新增弹窗组件 -->
		<u-modal v-if="showPcModal" :show="showPcModal" title="温馨提示"
			content="网站没有适配电脑浏览器，建议使用手机浏览器访问或者 F12 切换为手机浏览方式，体验更佳" :showCancelButton="false" confirmText="明白"
			@confirm="showPcModal = false"></u-modal>
		<view class="login-container">
			<u-toast ref="uToast"></u-toast>
			<view class="login-card">
				<view class="login-header">
					<text class="app-name">场快订</text>
					<text class="app-slogan">好场地，随时约</text>
				</view>
				<u--form labelPosition="left" :model="model" :rules="rules" ref="loginForm">
					<u-form-item prop="loginForm.userName" leftIcon="account-fill" borderBottom ref="item1">
						<u--input v-model="model.loginForm.userName" border="none" placeholder="请输入用户名"
							class="input-field"></u--input>
					</u-form-item>
					<u-form-item prop="loginForm.password" leftIcon="lock-fill" borderBottom ref="item1">
						<u--input v-model="model.loginForm.password" password border="none" placeholder="请输入密码"
							class="input-field"></u--input>
					</u-form-item>
				</u--form>
				<view class="login-actions">
					<u-button type="primary" shape="circle" class="login-button" @click="login()">登 录</u-button>
					<view class="register-link">
						还没有账号？<text class="link-text" @click="toRegister()">立即注册</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<div>Copyright © 2025 HelloDam All Rights Reserved.</div>
			<a href="https://beian.miit.gov.cn/" target="_blank" class="footer-link">粤ICP备2025357670号-1</a>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg,
		login
	} from "@/api/login";
	import {
		getUserProfileVo
	} from "@/api/user";

	export default {
		data() {
			return {
				model: {
					loginForm: {
						userName: '',
						password: '',
						uuid: '',
						code: '',
					},
				},
				rules: {
					'loginForm.userName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'loginForm.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				codeUrl: "",
				// 控制PC提示弹窗显示
				showPcModal: false,
			}
		},
		onReady() {
			this.$refs.loginForm.setRules(this.rules)
		},
		created() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.toIndex();
			}
			this.model.loginForm.userName = uni.getStorageSync('userName');
			this.model.loginForm.password = uni.getStorageSync('password');
		},
		onLoad() {
			this.checkDevice();
		},
		methods: {
			// 检查设备类型
			checkDevice() {
				uni.getSystemInfo({
					success: (res) => {
						// 判断是否是PC端
						const isPC = res.platform === 'windows' || res.platform === 'mac' || res.platform ===
							'linux';
						if (isPC) {
							this.showPcModal = true;
						}
					}
				});
			},
			getCode() {
				getCodeImg().then(res => {
					let captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
					if (captchaEnabled) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.model.loginForm.uuid = res.uuid;
					}
				});
			},
			login() {
				this.$refs.loginForm.validate().then(res => {
					login(this.model.loginForm.userName, this.model.loginForm.password, this.model.loginForm.code,
						this.model.loginForm.uuid).then(
						res => {
							uni.setStorage({
								key: "token",
								data: res.data.token,
								success: (res) => {
									getUserProfileVo().then(res => {
										uni.setStorageSync("curUser", res.data)
									})
									this.toIndex();
								}
							})
						}).catch(res => {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						type: 'error',
						message: "表单数据校验失败，请检查后再登录"
					})
				})
			},
			toIndex() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			toRegister() {
				uni.reLaunch({
					url: "/pages/register/register"
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 0 40rpx;
		// background-image: url('@/static/login/background.png');
		background-image: url('https://hellodam.website:7049/pic/2025/5/6/background.png');
		background-size: 100% auto;
		/* 高度100%匹配容器，宽度自动保持比例 */
		background-position: center;
		background-repeat: no-repeat;
		background-color: #f5f7fa;
		/* 背景色作为回退 */
	}

	.login-card {
		width: 100%;
		max-width: 80%;
		background: #ffffff;
		padding: 60rpx 50rpx;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 147, 233, 0.1);
		transition: all 0.3s ease;
	}

	.login-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.app-name {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
		background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.app-slogan {
		font-size: 28rpx;
		color: #888;
		display: block;
	}

	.input-field {
		padding: 20rpx 0;
		font-size: 32rpx;
	}

	.login-actions {
		margin-top: 60rpx;
	}

	.login-button {
		width: 100%;
		height: 90rpx;
		font-size: 34rpx;
		background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
		border: none;
		box-shadow: 0 5rpx 15rpx rgba(0, 147, 233, 0.2);
	}

	.register-link {
		text-align: center;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #666;
	}

	.link-text {
		color: #0093E9;
		margin-left: 10rpx;
		font-weight: 500;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
		background: #ffffff;
	}

	.footer-link {
		color: #0093E9;
		text-decoration: none;
		margin-top: 10rpx;
		display: inline-block;
	}
</style>